.x4-modifications {

  &__controls {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    > div {
      margin: 0 1rem 1rem 0;
      flex: 0 0 180px;
    }
  }

  &__wrapper {
    width: 100%;
    overflow-x: auto;
  }

  &__quality {
    margin-left: 0.5rem;
    position: relative;
    top: -1px;

    &--basic {
      color: #1c9341;
    }

    &--enhanced {
      color: #008fbf;
    }

    &--exceptional {
      color: #9370db;
    }
  }

  &__table {
    width: 800px;
    overflow: scroll;

    td {
      vertical-align: top;
      padding: 1rem;
    }

    th {
      padding: 0.5rem 1rem;
    }

    tbody {
      td:nth-of-type(1) {
        width: 250px;

        .mt-1 {
          margin-top: 0.5rem;
        }
      }
      td:nth-of-type(2) {
        width: 330px;
        padding-top: 2.2rem;

        .mt-1 {
          margin-top: 0.5rem;
        }
      }
      td:nth-of-type(3) {
        width: 230px;
        padding-top: 2.5rem;

        .mt-1 {
          margin-top: 0.4rem;
        }
      }
    }

    p {
      margin-bottom: 0.2rem;
    }
  }
}
